const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    mode: "production",
    entry: './src/main.js',
    output: {
        path: path.join(__dirname, '/build'),
        filename: "bundle.js" // 设置出口文件的名字。默认情况下，它叫main.js
    },
    devServer: {
        host: '127.0.0.1', // 配置启动ip地址
        port: 8088, // 配置端口
        open: true // 配置是否自动打开浏览器
    },
    module: {
        rules: [{
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader
                }, 'css-loader', 'less-loader']

            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                use: [{
                    loader: "url-loader",
                    options: {
                        name: "[name]-[hash:5].min.[ext]",
                        limit: 5000, // fonts file size <= 5KB, use 'base64'; else, output svg file
                        publicPath: "fonts/",
                        outputPath: "fonts/"
                    }
                }]
            },
            {
                // 如果是.vue文件，使用如下的loader
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/, // 排除目录
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }]
                // es6转es5
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({ // 提取css
            filename: 'css/[name]-[hash].css',
        }),
        new HtmlWebpackPlugin({ // 打包输出HTML
            minify: { // 压缩HTML文件
                removeComments: true, // 移除HTML中的注释
                collapseWhitespace: true, // 删除空白符与换行符
                minifyCSS: true // 压缩内联css
            },
            filename: 'index.html',
            template: path.resolve('./public/index.html') // 指定模块的位置
        }),
        new VueLoaderPlugin()
    ]
}